<template>
    <nly-content-wrapper class="content-warpper-2">
        <div class="content-header-2" >
            <div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">
                    <a-col class="btns-text-list">
                        <span style="margin-left:10px;">商品名称: </span>
                        <div>
                            <a-input style="width:120px;" v-model="postData.goodsName"></a-input>
                        </div>
                        <span style="margin-left:10px;">时间范围: </span>
                        <div>
                            <a-range-picker  @change="onRangeDateChange" /> </a-space>
                        </div>
                        <span style="margin-left:10px;">订单号: </span>
                        <div>
                            <a-input style="width:120px;" v-model="postData.orderNo"></a-input>
                        </div>
                        <div class="btns-text-botton">
                            <a-button style="top:-2px;margin-left:10px;" type="primary" @click="reLoadData">
                                 查询
                            </a-button>
                        </div>
                    </a-col>
                </a-row>
            </div>
        </div>
        <nly-content>
            <!-- 列表 -->
            <a-table :columns="columns" :data-source="data" bordered :scroll="{ x: 1000, y: 200}" :pagination="pagination" :row-selection="rowSelection"  @change="onTableChange" :loading="false">
                <div slot="orderTypeFilterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
                    <a-radio-group v-model="postData.orderType" @change="onConditionChange" style="flex-direction: column;">
                        <a-radio :style="radioStyle" :value="null">
                        所有
                        </a-radio>
                        <a-radio :style="radioStyle" :value="1">
                            新购
                        </a-radio>
                        <a-radio :style="radioStyle" :value="3">
                            续费
                        </a-radio>
                        <a-radio :style="radioStyle" :value="2">
                            升级
                        </a-radio>
                    </a-radio-group>
                </div>
                <!-- 操作 -->
                <a slot="operation" slot-scope="text, record" >
                    <a-row>
                        <!-- <a-button type="primary" size="small" @click="goToDetail(record)">详情</a-button>
                        <a-button v-if="record.status === 0"  type="primary" size="small" @click="goToPay(record)" style="margin-left:5px;">继续支付</a-button> -->
                        <!-- <a-button v-if="record.status === 0"  type="primary" size="small" @click="goToPay(record)">继续支付</a-button>
                        <a-button v-if="record.status === 0"  type="primary" size="small" @click="goToPay(record)">继续支付</a-button>
                        <a-button v-if="record.status === 0"  type="primary" size="small" @click="goToPay(record)">继续支付</a-button> -->
                    </a-row>
                </a>
            </a-table>
        </nly-content>  
    </nly-content-wrapper>
</template>

<script>
import { mapState } from "vuex";
// import { pageList} from "@/api/expenses/businessOrder";
import { orderPage } from "@/api/member/order";

export default {
    data () {
        const columns = [
            {
                align: "left",
                title: "订单号",
                dataIndex: "orderNo",
                width: 150,
            },
             {
                align: "left",
                title: "订单类型",
                dataIndex: "orderType",
                width: 80,
                customRender: (text, row, index) => {
                    let showText = "";
                    switch(text){
                        case 1:showText = <sapn style="color:#028C10">新购</sapn>;break;
                        case 2:showText = <sapn style="color:#D38F0C">升级</sapn>;break;
                        case 3:showText = <sapn style="color:red">续费</sapn>;break;
                    }
                    return showText;
                },
                scopedSlots: {
                    filterDropdown: 'orderTypeFilterDropdown',
                    filterIcon: 'filterIcon',
                },
            },
            {
                align: "left",
                title: "商品名称",
                dataIndex: "goodsName",
                width: 200,
            },
           
            {
                align: "center",
                title: "商品详情",
                dataIndex: "goodsDetail",
                width: 100,
                customRender: (text, row, index) => {
                    let { goodsType } = row;
                    let showHtml = null;
                    if(!text)return showHtml;
                    let jsonData = JSON.parse(text);
                    let {isSetting} = jsonData;
                    switch(goodsType){
                        //软件
                        case "software":
                            showHtml =  <div style="padding: 1rem 0 0 1rem;">
                                            <p>用户数：{jsonData.users}</p>
                                            <p>年限：{jsonData.years} </p>
                                            <p>折扣：{jsonData.discountRate} </p>
                                        </div>;    
                            break;
                        //话费
                        case "telCharges":
                            if(isSetting){
                                showHtml =  <div style="padding: 1rem 0 0 1rem;">
                                                <p>语音时长(分钟)：{jsonData.baseMinutes}</p>
                                            </div>;
                            }else{
                                 showHtml =  <div style="padding: 1rem 0 0 1rem;">
                                                <p>语音时长(分钟)：{jsonData.baseMinutes}</p>
                                                <p>语音单价(元/分钟)：{jsonData.minutePrice} </p>
                                            </div>;
                            }
                           
                            break;
                    }
                    return showHtml;
                },
            },
            {
                align: "center",
                title: "订单金额",
                dataIndex: "salePrice",
                width: 100,
                customRender: (text, row, index) => {
                    let showText = text ?<span style="color:red;font-weight: 700;">{text}</span> : text;
                    return showText;
                },
            },
            {
                title: "付款状态",
                dataIndex: "orderStatus",
                key: "orderStatus",
                width: 80,
                customRender: (text, row, index) => {
                    return text ? "已付款" : "未付款";
                }
            },
            // {
            //     align: "center",
            //     title: "状态",
            //     dataIndex: "status",
            //     width: 100,
            //     customRender: (text, row, index) => {
            //         let showText = "";
            //         switch(text){
            //             case 0:showText = <span style="color:#CD0019;">待支付</span>;break;
            //             case 1:showText = <span style="color:#BA7E0B;">处理中</span>;break;
            //             case 2:showText = <span style="color:#110002;">已取消</span>;break;
            //             case 3:showText = <span style="color:#028C10;">交易成功</span>;break;
            //             case 4:showText = <span style="color:#110002;">已过期</span>;break;
            //             case 400:showText = <span style="color:#110002;">已废弃</span>;break;
            //         }
            //         return showText;
            //     },
            //     scopedSlots: {
            //         filterDropdown: 'statusFilterDropdown',
            //         filterIcon: 'filterIcon',
            //     },
            // },
            {
                align: "center",
                title: "创建时间",
                dataIndex: "createDate",
                width:  100,
               
            },
            // {
            //     align: "center",
            //     title: "操作",
            //     dataIndex: "operation",
            //     width: 100,
            //     scopedSlots: { customRender: 'operation' },
            // },

        ];
        return {
            postData: {
                status:null,
                current:1,
                size:20,
              
            },
            pagination: {
                defaultPageSize: 20,
                size: "small",
                current: 1,
                pageSize: 20,
                total: 0,
                showTotal: total => {
                    return (
                        <div>
                            共 {total} 条数据，每页
                            <a-input-number
                                value={this.pagination.pageSize}
                                min={1}
                                max={500}
                                onPressEnter={e => this.changePageSize(e)}
                            />
                            条
                        </div>
                    );
                },
                showQuickJumper: true,
                showLessItems: true
            },
            numberReg: /^[1-9]{1}[0-9]*$/,
            floatReg: /^-?[0-9]*(\.[0-9]*)?$/,
            data: [],
            columns,
            radioStyle: {
                display: 'block',
                height: '30px',
                lineHeight: '30px',
            },
        };
    },
    created(){
        this.reLoadData();
    },
    activated(){
        this.reLoadData();
    },
    mounted(){

    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),

        rowSelection() {
            return {
                columnWidth:30,
                selectedRowKeys:this.selectedKeys,
                onChange: this.userSelection,
                getCheckboxProps: record => ({
                    props: {
                        disabled: record.status > 1, 
                    },
                }),
            };
        },
    },
    watch: {
    },
    methods: {
        onRangeDateChange(data,dataString){
            console.log("订单时间范围：",data,dataString);
            this.postData.startTime = dataString[0];
            this.postData.endTime = dataString[1] +" 23:59:59";
        },
        //跳转到业务订单详情
        goToDetail (item) {
            this.$router.push(`/sys/orderDetail/${item.id}`)
        },
        reLoadData(){
            this.pageList();
        },
         //点击分页
        onTableChange (pagination, filters, sorter) {
            Object.assign(this.postData, {
                    size:pagination.pageSize,
                    current: pagination.current,
            });
            Object.assign(this.pagination, {
                current: pagination.current,
                pageSize: pagination.pageSize
            });
            this.pageList();
        },
        //改变 分页大小
        changePageSize (e) {
            const value = e.target.value;
            Object.assign(this.postData, {
                    size: value,
                    current: 1,
            });
            Object.assign(this.pagination, {
                pageSize: Number.parseInt(value),
                current: 1,
            });
            this.pageList();
        },
         userSelection (keys, rows) {
            this.selectedKeys = [];
            this.selectedKeys = keys;
            this.selectedData = rows;
        },
        //获取列表
        pageList () {
            const { postData } = this;
            orderPage(postData).then(response => {
                if (response.code === 200) {
                    const { data } = response;
                    const { records, total, current, size } = data;
                    this.data = records;
                    this.data.forEach(item => {
                        item.key = item.id;
                    });
                    Object.assign(this.pagination, {
                        total,
                        current,
                        pageSize: size
                    });
                }
            }).catch(error => { });
        },
        //条件改变
        onConditionChange(){
            Object.assign(this.postData,{current:1});
            this.pageList();
        },
        //继续支付
        goToPay(record){

        }
    }
};
</script>
<style lang="less" scoped>

.btns-text-list {
    display: flex;
    height:48px;
    line-height: 48px;
    margin-top: -7px;
    div {
        padding: 0 10px
    }

    .btns-text-botton {
        sapn {
            border: 1px solid red;
        }
    }
}
</style>